<template>
  <div class="box" v-if="isShow">
    <el-row>
      <el-col :span="24">
        <el-card shadow="never" :body-style="{height:'calc(100vh - 230px)'}">

          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="top">
            <el-form-item label="请输入跳转url" prop="url">
              <el-input v-model="ruleForm.url"></el-input>
            </el-form-item>
            <el-form-item label="请输入跳转后自动改名的Title" prop="title">
              <el-input v-model="ruleForm.title"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="medium" @click="submitForm('ruleForm')" icon="el-icon-search">查询</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

  </div>
  <div class="content" v-else>
    <iframe
      class="iframe"
      :src="ruleForm.url"
      frameborder="no"
      scrolling="yes"
      allowfullscreen="true"
      id="iframe"
    ></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow:true,
      ruleForm: {
        url: 'https://www.bilibili.com/',
        title:'bilibili'

      },
      rules: {
        url: [
          { required: true, message: '请输入跳转url', trigger: 'blur' },
        ],
        title: [
          { required: true, message: '请输入跳转标题', trigger: 'blur' },
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isShow = !this.isShow
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>

<style scoped lang="scss">
.box{
  ::v-deep.el-form-item__label{
    font-weight: 400;
  }
  .el-input{
    width: 540px;
  }
  .demo-ruleForm{
    width: 540px;
    margin: 0 auto;
  }
}
.content{
  min-height: calc(100vh - 205px);
  padding: 20px;
  background: white;
  margin-bottom: 50px;
  transition: all .3s cubic-bezier(.645,.045,.355,1),border 0s,color .1s,font-size 0s;
  .iframe{
    width: 100%;
    min-height: calc(100vh - 205px);
  }
}
</style>
